import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import "./index.css";

import Root from "./routers/root";
import Home from "./routers/home";
import People, { loader as peopleLoader } from "./routers/people";
import Posts, { loader as postsLoader } from "./routers/posts";
import SecurityRoute from "./routers/security";
import SignIn from "./routers/signin";

import ErrorPage from "./pages/404Page";
import NotAccessPage from "./pages/403Page";

import SecurityProvider from "./providers/securityProvider";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/people",
        element: (
          <SecurityRoute>
            <People />
          </SecurityRoute>
        ),
        loader: peopleLoader,
      },
      {
        path: "/posts",
        element: (
          <SecurityRoute>
            <Posts />
          </SecurityRoute>
        ),
        loader: postsLoader,
      },
      { path: "/signin", element: <SignIn /> },
      { path: "/403", element: <NotAccessPage /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <SecurityProvider>
    <RouterProvider router={router} />
  </SecurityProvider>
);
